<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"inkgn.gitee.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="长路漫漫，半程风雨，半程春">
<meta property="og:type" content="website">
<meta property="og:title" content="静水深流">
<meta property="og:url" content="https://inkgn.gitee.io/page/2/index.html">
<meta property="og:site_name" content="静水深流">
<meta property="og:description" content="长路漫漫，半程风雨，半程春">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="yinks">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://inkgn.gitee.io/page/2/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'zh-CN'
  };
</script>

  <title>静水深流</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">静水深流</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/categories" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-motto">

    <a href="/motto/motto" rel="section"><i class="fa fa-book fa-fw"></i>古训</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/me" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content index posts-expand">
            
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/11/08/article29/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/11/08/article29/" class="post-title-link" itemprop="url">Vue 页面预览pdf功能实现（兼容移动端，iOS）</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-11-08 22:50:23" itemprop="dateCreated datePublished" datetime="2021-11-08T22:50:23+08:00">2021-11-08</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-11-13 12:55:06" itemprop="dateModified" datetime="2021-11-13T12:55:06+08:00">2021-11-13</time>
              </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="需求"><a href="#需求" class="headerlink" title="需求"></a>需求</h4><p>业务当中需要PC端点击按钮弹出窗口展示预览pdf功能，移动端需要全屏展示这样</p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/11/08/article29/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/11/03/article28/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/11/03/article28/" class="post-title-link" itemprop="url">记录一次Vue组件缓存（keep-alive）</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-11-03 12:49:45" itemprop="dateCreated datePublished" datetime="2021-11-03T12:49:45+08:00">2021-11-03</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-12-06 10:15:57" itemprop="dateModified" datetime="2022-12-06T10:15:57+08:00">2022-12-06</time>
              </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h4 id="先填个坑"><a href="#先填个坑" class="headerlink" title="先填个坑"></a>先填个坑</h4><p>写之前先填个坑，因为一时疏忽，把组将名称和组件components命名重复，导致一个十分诡异的bug，当我数据请求后在我的页面内完完全全复制了一份我当前页面的内容，毫无理由，十分恐怖，当我再次想重现当日情景时发现实现不了!</p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/11/03/article28/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/09/23/article27/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/09/23/article27/" class="post-title-link" itemprop="url">【面试题】 js 防抖节流</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-09-23 20:31:30" itemprop="dateCreated datePublished" datetime="2021-09-23T20:31:30+08:00">2021-09-23</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-10-24 14:04:13" itemprop="dateModified" datetime="2021-10-24T14:04:13+08:00">2021-10-24</time>
              </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>迁移测试</p>
<h3 id="页面主体"><a href="#页面主体" class="headerlink" title="页面主体"></a>页面主体</h3>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/09/23/article27/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/09/16/article26/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/09/16/article26/" class="post-title-link" itemprop="url">Promise,简单使用</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-09-16 19:26:22" itemprop="dateCreated datePublished" datetime="2021-09-16T19:26:22+08:00">2021-09-16</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-10-06 19:31:15" itemprop="dateModified" datetime="2021-10-06T19:31:15+08:00">2021-10-06</time>
              </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h3 id="Promise-链式调用"><a href="#Promise-链式调用" class="headerlink" title="Promise 链式调用"></a>Promise 链式调用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        resolve(<span class="string">&#x27;第一层成功&#x27;</span>)</span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line"></span><br><span class="line">&#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(res)</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            resolve(<span class="string">&quot;第二层成功&quot;</span>)</span><br><span class="line">        &#125;, <span class="number">2000</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(res)</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            resolve(<span class="string">&quot;第三层成功&quot;</span>)</span><br><span class="line">        &#125;, <span class="number">3000</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(res)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/09/16/article26/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/09/13/article25/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/09/13/article25/" class="post-title-link" itemprop="url">vuex数据惰性更新解决思路</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-09-13 17:17:12" itemprop="dateCreated datePublished" datetime="2021-09-13T17:17:12+08:00">2021-09-13</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>今天在开发一个页面时，需要完成一种效果，页面a在首次加载时载入数据存在vuex中渲染，以减少数据请求量，页面b是一个数据写入的页面，通过此页面写入数据提交到后台存入数据库，但是问题来了，因为a页面中我用了created钩子函数来加载数据，条件是vuex数据存储为空，但是因为created钩子仅在初始化DOM树时执行一次，又因为vuex存储的数据不为0所以并不能做到页面b数据写入成功就对页面a进行刷新，解决这个问题的办法不止一种，第一种方式简单粗暴就是通过定义vuex变量开关的方法，第二就是通过watch监听方式，不过这些都是笨方法，这里记录一条思路。具体如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//页面a</span></span><br><span class="line"></span><br><span class="line"><span class="attr">computed</span>:&#123;</span><br><span class="line"><span class="function"><span class="title">updatalist</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">this</span>.$store.getters.updatelist.length &lt;= <span class="number">0</span> )&#123;</span><br><span class="line">        getlist()</span><br><span class="line">    &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>.$store.getters.updatelist</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 页面b</span></span><br><span class="line"><span class="keyword">if</span>(resl.toString() == <span class="string">&#x27;200&#x27;</span>)&#123;</span><br><span class="line">    <span class="built_in">this</span>.success = <span class="literal">true</span></span><br><span class="line">    <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;homelist&#x27;</span>,&#123;<span class="string">&quot;state&quot;</span>:<span class="string">&quot;update&quot;</span>&#125;);</span><br><span class="line">    <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;uodataUserlist&#x27;</span>, <span class="string">&#x27;&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// vuex</span></span><br><span class="line"><span class="attr">getters</span>: &#123;</span><br><span class="line">    <span class="attr">updatelist</span>: <span class="function"><span class="params">state</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> list = [];</span><br><span class="line">        <span class="keyword">if</span> (state.indexdata.state == <span class="string">&quot;update&quot;</span>) &#123;</span><br><span class="line">            list = [];</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            list = state.indexdata</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> list</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/09/13/article25/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/09/01/article24/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/09/01/article24/" class="post-title-link" itemprop="url">axios + elementui loading接口请求封装</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-09-01 09:58:07" itemprop="dateCreated datePublished" datetime="2021-09-01T09:58:07+08:00">2021-09-01</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/axios/" itemprop="url" rel="index"><span itemprop="name">axios</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>记录一次axios接口封装的过程</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&quot;axios&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Loading &#125; <span class="keyword">from</span> <span class="string">&#x27;element-ui&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> BASE_URL = <span class="string">&#x27;https://netease-music-api.fe-mm.com&#x27;</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> requstwaitoutloading = createBaseInstance()</span><br><span class="line"><span class="comment">// 创建无loading请求接口，适用于 评论，登录</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> requst = createBaseInstance()</span><br><span class="line"><span class="comment">// loading接口请求</span></span><br><span class="line">loadingcycle(requst.interceptors)</span><br><span class="line"><span class="comment">// 为接口添加loading拦截器</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// axios基础请求模板，</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createBaseInstance</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> instance = axios.create(&#123;</span><br><span class="line">            <span class="attr">baseURL</span>: BASE_URL,</span><br><span class="line">            <span class="attr">timeout</span>: <span class="number">10000</span>,</span><br><span class="line"></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">// 添加默认数据拦截器</span></span><br><span class="line">    instance.interceptors.response.use(handleResponse, handleerror)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> instance</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 初始化loading</span></span><br><span class="line"><span class="keyword">let</span> loading</span><br><span class="line"></span><br><span class="line"><span class="comment">// loading拦截器周期载入，入场与出场</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">loadingcycle</span>(<span class="params">interceptors</span>) </span>&#123;</span><br><span class="line">    interceptors.request.use(loadingenter)</span><br><span class="line">    interceptors.response.use(loadingout, requesterror)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 加载element ui loading 组件</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">loadingenter</span>(<span class="params">config</span>) </span>&#123;</span><br><span class="line">    loading = Loading.service(&#123;</span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;body&#x27;</span>,</span><br><span class="line">        <span class="attr">text</span>: <span class="string">&#x27;正在加载中...&#x27;</span>,</span><br><span class="line">        <span class="attr">spinner</span>: <span class="string">&#x27;el-icon-loading&#x27;</span>,</span><br><span class="line">        <span class="attr">background</span>: <span class="string">&#x27;transparent&#x27;</span>,</span><br><span class="line">        <span class="attr">customClass</span>: <span class="string">&#x27;loadingname&#x27;</span></span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> config</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 关闭loading组件</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">loadingout</span>(<span class="params">response</span>) </span>&#123;</span><br><span class="line">    loading.close();</span><br><span class="line">    <span class="keyword">return</span> response</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 执行异常，抛出错误</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">requesterror</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    loadingout()</span><br><span class="line">    <span class="keyword">throw</span> e</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对响应数据的处理，剥离部分数据嵌套</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handleResponse</span>(<span class="params">response</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> response.data</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 对请求错误的处理，弹窗提示，终止js运行，抛出错误</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handleerror</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">&#x27;出错了！&#x27;</span>, e.message);</span><br><span class="line">    <span class="keyword">throw</span> e</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/08/27/article10/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/08/27/article10/" class="post-title-link" itemprop="url">es6解构赋值妙用</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-08-27 21:15:49" itemprop="dateCreated datePublished" datetime="2021-08-27T21:15:49+08:00">2021-08-27</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/es6/" itemprop="url" rel="index"><span itemprop="name">es6</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>先假设一个场景，你在请求一组数据，仅仅需要一个图片链接一段文字以及一个ID，并且你在开发一个spa页面，为了提升用户体验，你需要把这些数据保存的vuex中。于是请求数据返回了，你打开一看，这特么都是啥？？数组中每一个对象都有上百个键值对，可有些对你没用啊！怎么办？用解构赋值啊。话不多说，先看例子</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="title">getdata</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;data&#125; = <span class="keyword">await</span> topsongs(<span class="built_in">this</span>.type)</span><br><span class="line">        <span class="keyword">let</span> listsongs = data</span><br><span class="line">        <span class="comment">// .map js接口数据映射</span></span><br><span class="line">        <span class="keyword">let</span> songsdata = listsongs.map(<span class="function"><span class="params">songs</span>=&gt;</span>&#123;</span><br><span class="line">            <span class="keyword">const</span> &#123;id, name,artists,duration,mvid,<span class="attr">album</span>: &#123; picUrl, <span class="attr">name</span>: albumName,subType&#125;&#125; = songs</span><br><span class="line">            <span class="keyword">return</span> createSong(&#123;id,name,artists,duration,albumName,<span class="attr">img</span>:picUrl,<span class="attr">mvId</span>:mvid,subType&#125;)</span><br><span class="line">            <span class="comment">// createSong 是外部封装的结构赋值方法</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;updatatopsongs&#x27;</span>,songsdata)</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/08/27/article10/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/08/21/article11/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/08/21/article11/" class="post-title-link" itemprop="url">JS数组map方法做接口数据映射</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-08-21 13:10:50" itemprop="dateCreated datePublished" datetime="2021-08-21T13:10:50+08:00">2021-08-21</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/js/" itemprop="url" rel="index"><span itemprop="name">js</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>JS数组map方法与foreach功能十分相似却又有所不同</p>
<h2 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h2>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/08/21/article11/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/08/19/article9/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/08/19/article9/" class="post-title-link" itemprop="url">async和await的正确用法</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-08-19 19:23:59" itemprop="dateCreated datePublished" datetime="2021-08-19T19:23:59+08:00">2021-08-19</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/es6/" itemprop="url" rel="index"><span itemprop="name">es6</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>说到async和await，就不得不提 Promise ，说到 Promise 又有几个人不知道axios呢？所以故事是这样婶儿滴…</p>
<p>之前做播放器因为接口太多在页面频繁的写太繁琐，而且看起来也很low，就想着学习大佬把接口单独放到一个API文件中去，这样既美观又方便，接口写好之后遇到一个问题，通过单独封装的接口返回的数据往往是undefined，所谓成也萧何败萧。经过一番查证得知，因为Promise 异步加载特性，在避免了回调地狱的同时 也让它不等接口返回真正的数据出现,就已经结束了整个代码块的运行且没有再次更新。所以想下面的写法就是行不通的。</p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/08/19/article9/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://inkgn.gitee.io/2021/08/18/article12/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
      <meta itemprop="name" content="yinks">
      <meta itemprop="description" content="长路漫漫，半程风雨，半程春">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="静水深流">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2021/08/18/article12/" class="post-title-link" itemprop="url">vue-router添加默认子路由</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-08-18 23:17:47" itemprop="dateCreated datePublished" datetime="2021-08-18T23:17:47+08:00">2021-08-18</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/vue-router/" itemprop="url" rel="index"><span itemprop="name">vue-router</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>记录一下，给 vue-router 添加默认子路由。还是做播放器遇到的，音乐搜索后返回数据有三个分类页面，分别是 音乐，MV，歌单，所以问题就来了，搜索后首先显示的栏目应该如何设置呢？百度之后有两种答案，</p>
<p>第一种是在children配置项里加一个空白页面的路由,父路由默认重定向到该空白页面.在这个空白页面里处理逻辑,拿到具体跳转到哪个路由后,再调用router.push。不过我就得不太好。</p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2021/08/18/article12/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  


  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/3/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="yinks"
      src="https://blog-1253246719.cos.ap-chengdu.myqcloud.com/blog/user_info/face">
  <p class="site-author-name" itemprop="name">yinks</p>
  <div class="site-description" itemprop="description">长路漫漫，半程风雨，半程春</div>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://gitee.com/inkgn" title="Gitee → https:&#x2F;&#x2F;gitee.com&#x2F;inkgn" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>Gitee</a>
      </span>
      <span class="links-of-author-item">
        <a href="/2087104694@qq.com" title="E-Mail → 2087104694@qq.com"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">yinks</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

</body>
</html>
